<template>
  <div>
    <el-container>
      <el-header><top-bar></top-bar></el-header>
      <el-main
        ><search-bar></search-bar>
        <el-card class="big-register-card">
          <el-divider>注册</el-divider>
          <div id="register-card">
            <el-form
              :rules="rules"
              :model="formLabelAlign"
              ref="formLabelAlign"
              :label-position="labelPosition"
              label-width="80px"
            >
              <el-form-item label="用户名" prop="username">
                <el-input v-model="formLabelAlign.username"></el-input>
              </el-form-item>
              <el-form-item type label="密码" prop="password">
                <el-input
                  type="password"
                  v-model="formLabelAlign.password"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="ConfirmPassword">
                <el-input
                  type="password"
                  v-model="formLabelAlign.ConfirmPassword"
                ></el-input>
              </el-form-item>
              <el-row>
                <el-button type="success" @click="register" round
                  >注册</el-button
                >
                <el-button type="info" round @click="cancel"
                  >取消注册</el-button
                >
              </el-row>
            </el-form>
          </div>
        </el-card>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import TopBar from "../TopBar/TopBar.vue";
import SearchBar from "../SearchBar/SearchBar.vue";
import { Register } from "../../../api/LoginAndRegister";
export default {
  components: {
    TopBar,
    SearchBar,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.formLabelAlign.password !== "") {
          this.$refs.formLabelAlign.validateField("ConfirmPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formLabelAlign.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        ConfirmPassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        username: "",
        password: "",
        ConfirmPassword: "",
      },
    };
  },
  methods: {
    cancel() {
      window.location.href = "/login";
    },
    register() {
      var userName = this.formLabelAlign.username;
      var passWord = this.formLabelAlign.password;
      var confirmPassword = this.formLabelAlign.ConfirmPassword;
      Register({
        username: userName,
        password: passWord,
        repassword: confirmPassword,
        userrole: "用户",
      })
        .then((data) => {
          console.log(data);
          if (data.data.code == 200) {
            this.$router.push({ path: "/login" });
          } else {
            this.$message.error("两次密码不一致");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #333;
  color: #333;
  text-align: center;
  line-height: 40px;
}
.el-header {
  height: 40px !important;
  padding: 0 120px;
}

.el-main {
  background-color: whitesmoke;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
  min-height: 750px;
  height: 100%;
  padding: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

#register-card {
  margin:50px auto;
  width: 50%;
  height: 300px;
}

/* 注册的父级卡片 */
.big-register-card {
  background-image: linear-gradient(aliceblue, snow);
  margin-top: 30px;
  min-height: 300px;
  box-shadow: none;
}

/* 深度选择注册父级卡片中的body */
.big-register-card >>> .el-card__body {
  width: 50%;
  margin: auto;
}

/* 横分割线内部文本样式 */
.el-divider,
.el-divider--horizontal >>> .el-divider__text,
.is-center {
  font-size: 35px;
  font-weight: bold;
}
</style>